<template>
    <div id="ds35">
        <Breadcrumb style="margin-bottom: 10px">
            <BreadcrumbItem to="/superAdmin">首页</BreadcrumbItem>
            <BreadcrumbItem>市场推广管理</BreadcrumbItem>
            <BreadcrumbItem>推荐码管理</BreadcrumbItem>
        </Breadcrumb>

        <Input v-model="reffer" placeholder="登录手机号码" style="width: 150px"/>
        &nbsp;
        <Button type="info" @click="search()">查询</Button>
        &nbsp;
        <Button type="info" @click="addBool=true">添加</Button>

        <div style="margin-top: 10px">
            <Table :maxWidth="1000" :minWidth="10" stripe :columns="columns" :data="data"
                   v-if="data&&data.length>0"></Table>

            <Page :total="pageTotal" :current="curPage" @on-change="pageChange"
                  style="display: inline-block;padding-top: 10px;padding-bottom: 10px" show-elevator
                  v-if="data&&data.length>0"/>
            <div style="padding-left: 10px;position:relative ;display: inline-block;height: 52px;line-height: 52px;top: -12px">
                总计 {{pageTotal}} 条数据
            </div>
        </div>
        <div id="loading" v-if="loading">
            <div class="spinner">
                <div class="double-bounce1"></div>
                <div class="double-bounce2"></div>
            </div>
        </div>

        <Modal v-model="updataBool">
            <div slot="header" style="font-size: 18px;text-align: center;color: #0ca5f5">
                修改
            </div>
            <div style="text-align:left;font-size: 16px">
                <input v-model="updata.userName" placeholder="用户名">
                <br>
                <br>
                <input v-model="updata.password" placeholder="密码">
                <br>
                <br>
                <label for="two">男</label>
                <input type="radio" id="two" value="男" v-model="updata.sex">
                &nbsp;
                <label for="one">女</label>
                <input type="radio" id="one" value="女" v-model="updata.sex">
                <br>
                <br>
                <input v-model="updata.job" placeholder="职位">
                <br>
                <br>
                <input v-model="updata.address" placeholder="地址">
                <br>
                <br>
                <input v-model="updata.email" placeholder="地址">
                <br>
                <br>
                <label for="two">管理员</label>
                <input type="radio" id="c" value="管理员" v-model="updata.roleId1">
                &nbsp;
                <label for="one">普通用户</label>
                <input type="radio" id="d" value="普通用户" v-model="updata.roleId1">


            </div>
            <div slot="footer">
                <Button type="info" @click="updataBool=false">取消</Button>
                <Button type="info" @click="updataReferrer()">确定</Button>
            </div>
        </Modal>


        <Modal v-model="addBool">
            <div slot="header" style="font-size: 18px;text-align: center;color: #0ca5f5">
                添加用户
            </div>
            <div style="text-align:left;font-size: 16px">
                <input v-model="addMobile" placeholder="登录手机号码">
                <br>
                <br>
                <input v-model="addUserName" placeholder="姓名">
                <br>
                <br>
                <input v-model="addPassword" placeholder="密码">
                <br>
                <br>
                <label for="two">男</label>
                <input type="radio" id="e" value="男" v-model="addSex">
                &nbsp;
                <label for="one">女</label>
                <input type="radio" id="f" value="女" v-model="addSex">
                <br>
                <br>
                <input v-model="addJob" placeholder="职位">
                <br>
                <br>
                <input v-model="addEmail" placeholder="邮箱">
                <br>
                <br>
                <input v-model="addAddress" placeholder="地址">
                <br>
                <br>
                <label for="two">管理员</label>
                <input type="radio" id="h" value="管理员" v-model="addRoleId">
                &nbsp;
                <label for="one">普通用户</label>
                <input type="radio" id="g" value="普通用户" v-model="addRoleId">

            </div>
            <div slot="footer">
                <Button type="info" @click="addBool=false">取消</Button>
                <Button type="info" @click="addRef()">确定</Button>
            </div>
        </Modal>

    </div>
</template>
<script type="text/ecmascript-6">
    import sessionUtils from '../../model/sessionUtils';
    import ipServer from '../../model/ip';
    import Axios from 'axios';
    export default{
        data(){
            return {
                addBool: false,
                addMobile: "",
                addUserName: "",
                addJob: "",
                addSex: "男",
                addEmail: "",
                addRoleId: "普通用户",
                addAddress: "",
                addPassword: "",
                reffer: "",
                loading: false,
                updata: "",
                updataBool: false,
                updataIndex: 0,
                pageTotal: 0,
                curPage: 0,
                columns: [
                    {
                        title: '创建时间',
                        key: 'create1',
                        width: 155
                    }, {
                        title: '手机号码',
                        key: 'mobile',
                        width: 115
                    },
                    {
                        title: '姓名',
                        key: 'userName',
                        width: 100
                    },
                    {
                        title: '密码',
                        key: 'password'
                    }, {
                        title: '职位',
                        key: 'job'
                    }, {
                        title: '地址',
                        key: 'address'
                    }, {
                        title: '类型',
                        key: 'roleId1',
                        width: 100
                    }, {
                        title: '状态',
                        key: 'status1',
                        width: 60
                    }, {
                        title: '添加人',
                        key: 'addUser',
                        width: 90
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    }, style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.updata = {...params.row};
                                            this.updataBool = true;
                                            this.updataIndex = params.index;
                                        }
                                    }
                                }, '修改')
                                ,
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            var ds = this;
                                            this.$Modal.confirm({
                                                title: "提示",
                                                content: "确定禁用?",
                                                onOk(){
                                                    ds.delData(params);
                                                },
                                                onCancel(){

                                                }
                                            });
                                        }
                                    }
                                }, '禁用')
                            ]);
                        }
                    }
                ],
                data: []
            }
        },
        mounted(){
            this.getData();
        },
        methods: {
            search(){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));

                if (this.reffer) {
                    param.append('selectMobile', this.reffer + "");
                }
                this.loading = true;
                Axios.post(ipServer + "manageUser/selectAllUsers", param)
                        .then(res => {
                            if (res.data.code == 0) {
                                sessionUtils.setSession("token", res.data.token);
                                for (var i = 0; i < res.data.data.result.length; i++) {
                                    res.data.data.result[i].create1 = sessionUtils.timestampToTime(res.data.data.result[i].create);

                                    if (res.data.data.result[i].status == 1) {
                                        res.data.data.result[i].status1 = "正常";
                                    } else {
                                        res.data.data.result[i].status1 = "禁用";
                                    }

                                    if (res.data.data.result[i].roleId == 1) {
                                        res.data.data.result[i].roleId1 = "管理员";
                                    } else {
                                        res.data.data.result[i].roleId1 = "普通用户";
                                    }
                                }
                                this.data = res.data.data.result;
                                this.pageTotal = res.data.data.dataTotal;
                                this.curPage = res.data.data.curPage;
                                if (this.data.length == 0)
                                    this.$Message.info("查询数据不存在!");
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$Message.info(res.data.msg);
                                this.$router.push("/login");

                            } else {
                                this.$Message.info(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            },
            pageChange(page){
                this.getData(page);
            },
            addRef(){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));

                if (this.addRoleId == "普通用户") {
                    param.append('roleId', "2");
                }
                if (this.addRoleId == "管理员") {
                    param.append('roleId', "1");
                }

                if (this.addMobile) {
                    param.append('userMobile', this.addMobile);
                } else {
                    this.$Message.info("请输入手机号码!");
                    return;
                }

                if (this.addUserName) {
                    param.append('userName', this.addUserName);
                } else {
                    this.$Message.info("请输入姓名!");
                    return;
                }

                if (this.addPassword) {
                    param.append('password', this.addPassword);
                } else {
                    this.$Message.info("请输入密码!");
                    return;
                }

                param.append('sex', this.addSex);

                if (this.addJob) {
                    param.append('job', this.addJob);
                } else {
                    this.$Message.info("请输入职位!");
                    return;
                }

                if (this.addEmail) {
                    param.append('email', this.addEmail);
                } else {
                    this.$Message.info("请输入邮箱!");
                    return;
                }

                if (this.addAddress) {
                    param.append('address', this.addAddress);
                } else {
                    this.$Message.info("请输入地址!");
                    return;
                }


                this.loading = true;
                Axios.post(ipServer + "manageUser/addManageUser", param)
                        .then(res => {
                            if (res.data.code == 0) {
                                sessionUtils.setSession("token", res.data.token);
                                this.addMobile = "";
                                this.addUserName = "";
                                this.addJob = "";
                                this.addSex = "男";
                                this.addEmail = "";
                                this.addRoleId = "普通用户";
                                this.addAddress = "";
                                this.addPassword = "";

                                this.addBool = false;
                                this.$Message.info("添加成功!");
                                this.getData();
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$router.push("/login");
                                this.$Message.info(res.data.msg);
                            } else {
                                this.$Message.info(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            }, updataReferrer(){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));
                param.append('userId', this.updata._id);

                if (this.updata.roleId1 == "管理员") {
                    param.append('roleId', "1");
                }
                if (this.updata.roleId1 == "普通用户") {
                    param.append('roleId', "2");
                }

                param.append('sex', this.updata.sex);

                if (this.updata.userName) {
                    param.append('userName', this.updata.userName);
                } else {
                    this.$Message.info("用户名为空!");
                    return
                }
                if (this.updata.password) {
                    param.append('password', this.updata.password);
                } else {
                    this.$Message.info("密码为空!");
                    return
                }
                if (this.updata.job) {
                    param.append('job', this.updata.job);
                } else {
                    this.$Message.info("职位为空!");
                    return
                }
                if (this.updata.email) {
                    param.append('email', this.updata.email);
                } else {
                    this.$Message.info("邮箱为空!");
                    return
                }
                if (this.updata.address) {
                    param.append('address', this.updata.address);
                } else {
                    this.$Message.info("地址为空!");
                    return
                }


                this.loading = true;
                Axios.post(ipServer + "manageUser/updateManageUserByUserId", param)
                        .then(res => {
                            if (res.data.code == 0) {
                                sessionUtils.setSession("token", res.data.token);
                                this.data[this.updataIndex].password = this.updata.password;
                                this.data[this.updataIndex].userName = this.updata.userName;
                                this.data[this.updataIndex].sex = this.updata.sex;
                                this.data[this.updataIndex].job = this.updata.job;
                                this.data[this.updataIndex].email = this.updata.email;
                                this.data[this.updataIndex].address = this.updata.address;
                                this.data[this.updataIndex].roleId1 = this.updata.roleId1;

                                if (this.updata.roleId1 == "管理员") {
                                    this.data[this.updataIndex].roleId = 0;
                                }
                                if (this.updata.roleId1 == "普通用户") {
                                    this.data[this.updataIndex].roleId = 1;
                                }

                                this.updataBool = false;
                                this.$Message.info("修改成功!");
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$router.push("/login");
                                this.$Message.info(res.data.msg);
                            } else {
                                this.$Message.info(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            }, delData(data){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));
                param.append('userId', data.row._id);
                this.loading = true;
                Axios.post(ipServer + "manageUser/deleteManageUserByUserId", param)
                        .then(res => {
                            if (res.data.code == 0) {
                                sessionUtils.setSession("token", res.data.token);
                                this.data[data.index].status = 2;
                                this.data[data.index].status1 = "禁用";
                                this.$Message.info("禁用成功!");
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$router.push("/login");
                                this.$Message.info(res.data.msg);
                            } else {
                                this.$Message.info(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            },
            getData(page){
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));
                if (page) {
                    param.append('pageId', page + "");
                }
                this.loading = true;
                Axios.post(ipServer + "manageUser/selectAllUsers", param)
                        .then(res => {
                            if (res.data.code == 0) {
                                sessionUtils.setSession("token", res.data.token);

                                for (var i = 0; i < res.data.data.result.length; i++) {
                                    res.data.data.result[i].create1 = sessionUtils.timestampToTime(res.data.data.result[i].create);

                                    if (res.data.data.result[i].status == 1) {
                                        res.data.data.result[i].status1 = "正常";
                                    } else {
                                        res.data.data.result[i].status1 = "禁用";
                                    }
                                    if (res.data.data.result[i].roleId == 1) {
                                        res.data.data.result[i].roleId1 = "管理员";
                                    } else {
                                        res.data.data.result[i].roleId1 = "普通用户";
                                    }
                                }
                                this.data = res.data.data.result;
                                this.pageTotal = res.data.data.dataTotal;
                                this.curPage = res.data.data.curPage;
                            } else if (res.data.code == 3) {
                                sessionUtils.clear();
                                this.$router.push("/login");
                                this.$Message.info(res.data.msg);
                            } else {
                                this.$Message.info(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(err=> {
                            this.loading = false;
                            this.$Message.info(err);
                        });
            }
        }
    }
</script>


<style scoped>
    @import "../../assets/css/loading.css";

</style>